<template>
    <div class="table-search">
        <span >
            <Poptip v-model="showFilter" placement="bottom-end">
                <!-- <i class="el-icon-search poptip-condition-add"></i> -->
                <a href="javascript:;" class='poptip-condition-add'>列表查找</a>
                <div slot="content">
                    <Poptip v-model="showFilterCondition" placement="bottom-start" class='poptip-condition'>
                        <i class="el-icon-plus"></i>
                        <a href="javascript:;">添加过滤条件</a>
                        <div slot="content" class="condition-list">
                            <ul>
                                <li
                                    v-for="(item, index) in selectHead"
                                    :key="index"
                                    class='poptip-condition-item'
                                    @click="addFilterCondition(item)">
                                    {{item.label}}
                                </li>
                            </ul>
                        </div>
                    </Poptip>
                    <el-form :model="conditionForm" @submit.native.prevent ref="conditionForm" label-width="120px" class="demo-dynamic">
                        <el-form-item
                            v-for="(condition, index) in conditionForm.condition"
                            :label="condition.label"
                            :key="condition.key"
                            :prop="'condition.' + index + '.value'"
                            :rules="{required: true, message: condition.label + '不能为空', trigger: 'blur'}">
                            <el-select
                                v-if='condition.label === "流程人员" || condition.label === "专属顾问" '
                                v-model="condition.value"
                                :placeholder="condition.label === '流程人员' ? '流程人员' : '专属顾问'"
                                size="small"
                                filterable
                            >
                                <el-option
                                    v-for="item in processOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-else-if='condition.label === "申请人"'
                                v-model="condition.value"
                                placeholder="请选择申请人"
                                size="small"
                                filterable
                            >
                                <el-option
                                    v-for="item in nameOptions"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-else-if='condition.label === "来源"'
                                v-model="condition.value"
                                placeholder="请选择来源"
                                size="small"
                                filterable
                            >
                                <el-option
                                    v-for="item in sourceOptions"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-else-if='condition.label === "导师"'
                                v-model="condition.value"
                                placeholder="请选择导师"
                                size="small"
                                filterable
                            >
                                <el-option
                                    v-for="item in teacherOptions"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                ></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "流程状态" && !condition.final' v-model="condition.value" placeholder="流程状态" size="small">
                                <!-- <el-option label="未接单" value="未接单"></el-option> -->
                                <el-option label="代理人撰写中" value="代理人撰写中"></el-option>
                                <el-option label="案件内审中" value="案件内审中"></el-option>
                                <el-option label="案件修改中" value="案件修改中"></el-option>
                                <el-option label="定稿文件发送中" value="定稿文件发送中"></el-option>
                                <el-option label="发明人确认定稿中" value="发明人确认定稿中"></el-option>
                                <el-option label="上报文件上传中" value="上报文件上传中"></el-option>
                                <el-option label="文件格式审核中" value="文件格式审核中"></el-option>
                                <!-- <el-option label="已撤案" value="已撤案"></el-option> -->
                            </el-select>
                            <el-select v-else-if='condition.label === "流程状态"&& condition.final' v-model="condition.value" placeholder="请选择流程状态" size="small">
                                <el-option label="等待提交国知局" value="等待提交国知局"></el-option>
                                <el-option label="已提交国知局" value="已提交国知局"></el-option>
                                <el-option label="等待补正" value="等待补正"></el-option>
                                <el-option label="已补正" value="已补正"></el-option>
                                <el-option label="等待答复" value="等待答复"></el-option>
                                <el-option label="已答复" value="已答复"></el-option>
                                <el-option label="初步审查合格" value="初步审查合格"></el-option>
                                <el-option label="实质审查中" value="实质审查中"></el-option>
                                <el-option label="驳回" value="驳回"></el-option>
                                <el-option label="授权" value="授权"></el-option>
                                <el-option label="下证" value="下证"></el-option>
                                <el-option label="撤案" value="撤案"></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "订单状态"' v-model="condition.value" size="small">
                                <el-option label="案件内审中" value="案件内审中"></el-option>
                                <el-option label="案件修改中" value="案件修改中"></el-option>
                                <el-option label="上报文件上传中" value="上报文件上传中"></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "状态"' v-model="condition.value" placeholder="状态" size="small">
                                <el-option label="在职" value="在职"></el-option>
                                <el-option label="离职" value="离职"></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "审核状态"' v-model="condition.value" placeholder="请选择审核状态" size="small">
                                <el-option label="待审核" value="0"></el-option>
                                <el-option label="通过" value="1"></el-option>
                                <el-option label="未通过" value="2"></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "申诉审核状态"' v-model="condition.value" placeholder="请选择审核状态" size="small">
                                <el-option label="待审核" :value="['3']"></el-option>
                                <el-option label="通过"   :value="['1']"></el-option>
                                <el-option label="未通过" :value="['2']"></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "申诉项目"' v-model="condition.value" placeholder="请选择申诉项目" size="small">
                                <el-option label="质量" value="质量"></el-option>
                                <el-option label="态度" value="态度"></el-option>
                                <el-option label="撰写耗时" value="撰写耗时"></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "申请人类型" || condition.label === "反馈人类型"' v-model="condition.value" placeholder="请选择申请人类型" size="small">
                                <el-option label="代理人" value="1"></el-option>
                                <el-option label="用户" value="2"></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "提现进度"' v-model="condition.value" placeholder="请选择提现进度" size="small">
                                <el-option label="审核中" value="0"></el-option>
                                <el-option label="打款中" value="1"></el-option>
                                <el-option label="已打款" value="2"></el-option>
                                <el-option label="驳回" value="3"></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "退款渠道"' v-model="condition.value" placeholder="请选择退款渠道" size="small">
								<el-option label="银行转账" value="银行转账"></el-option>
								<el-option label="微信" value="微信"></el-option>
								<el-option label="支付宝" value="支付宝"></el-option>
								<el-option label="原路退回" value="原路退回"></el-option>
							</el-select>
                            <el-select v-else-if='condition.label === "付款渠道"' v-model="condition.value" placeholder="请选择付款渠道" size="small">
								<el-option label="银行转账" value="银行转账"></el-option>
								<el-option label="微信" value="微信"></el-option>
								<el-option label="支付宝" value="支付宝"></el-option>
							</el-select>
                            <el-select v-else-if='condition.label === "专利类型"' v-model="condition.value" placeholder="请选择专利类型" size="small">
                                <template v-if="condition.final">
                                    <el-option label="发明专利" value="F"></el-option>
                                    <el-option label="实用新型" value="S"></el-option>
                                    <el-option label="外观设计" value="W"></el-option>
                                </template>
                                <template v-else>
                                    <el-option label="发明专利" value="发明专利"></el-option>
                                    <el-option label="实用新型" value="实用新型"></el-option>
                                    <el-option label="外观设计" value="外观设计"></el-option>
                                    <el-option label="不确定" value="不确定"></el-option>
                                </template>
                            </el-select>
                            <!-- <el-select v-else-if='condition.label === "申报类型"' v-model="condition.value" placeholder="请选择专利类型" size="small">
                                <el-option label="发明专利" value="F"></el-option>
                                <el-option label="实用新型" value="S"></el-option>
                                <el-option label="外观设计" value="W"></el-option>
                            </el-select> -->
                            <el-select v-else-if='condition.label === "奖惩类型"' v-model="condition.value" placeholder="请选择奖惩类型" size="small">
                                <el-option label="奖励" value="奖励"></el-option>
                                <el-option label="惩戒" value="惩戒"></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "意见类型"' v-model="condition.value" placeholder="请选择意见类型" size="small">
                                <el-option label="平台优化" value="1"></el-option>
                                <el-option label="服务建议" value="2"></el-option>
                            </el-select>
                            <el-select v-else-if='condition.label === "处理进度"' v-model="condition.value" placeholder="请选择处理进度" size="small">
                                <el-option label="处理中" value="0"></el-option>
                                <el-option label="未采纳" value="1"></el-option>
                                <el-option label="已采纳" value="2"></el-option>
                                <el-option label="恶意建议" value="3"></el-option>
                            </el-select>
                            <el-select
                                v-else-if='condition.label === "代理人"'
                                v-model="condition.value"
                                placeholder="请选择代理人"
                                size="small"
                                filterable
                            >
                                <el-option
                                    v-for="item in agentOptions"
                                    :key="item.id"
                                    :label="item | agentNumAddName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                            <el-select
                                v-else-if='condition.label === "发明人" && condition.select'
                                v-model="condition.value"
                                placeholder="请选择代理人"
                                size="small"
                                filterable
                            >
                                <el-option
                                    v-for="item in inventorOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                            <el-date-picker
                                v-model="condition.value"
                                el-date-picker
                                type="daterange"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                size="small"
                                :validate-event='false'
                                v-else-if='condition.label === "时间选择"
                                        || condition.label === "修改时间"
                                        || condition.label === "注册时间"
                                        || condition.label === "申请时间"
                                        || condition.label === "创建时间"
                                        || condition.label === "扣款时间"
                                        || condition.label === "开票时间"
                                        || condition.label === "退款时间"
                                        || condition.label === "更新时间"
                                        || condition.label === "提交时间"
                                        || condition.label === "处理时间"
                                        || condition.label === "申诉时间"
                                        || condition.label === "统计时间"
                                '>
                            </el-date-picker>
                            <el-date-picker
                                v-model="condition.value"
                                el-date-picker
                                type="month"
                                placeholder="选择日期"
                                value-format="yyyy-MM"
                                size="small"
                                :validate-event='false'
                                v-else-if='condition.label === "时间选择(月)"'>
                            </el-date-picker>
                            <el-input v-else size="small" v-model="condition.value" @keyup.enter.native="submitsearch('conditionForm')"></el-input>
                            <!-- <el-button @click.stop="removeDomain(condition)" size="mini" class="close" icon="el-icon-close"></el-button> -->
                            <i class="close el-icon-close"  @click.stop="removeDomain(condition)" ></i>
                        </el-form-item>
                    </el-form>

                    <div class="btns">
                        <el-button @click="resetForm('conditionForm')" size="mini">重置</el-button>
                        <el-button @click="submitsearch('conditionForm')" size="mini">查询</el-button>
                    </div>
                </div>
            </Poptip>
        </span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            agentOptions: [],
            processOptions: [],
            inventorOptions: [],
            showFilter: false,
            showFilterCondition: false,
            // 筛选条件
            conditionForm: {
                condition: []
            },
            sourceOptions: ['申请出师', '推荐出师']
        }
    },

    props: {
        selectHead: {
            type: Array,
            default: () => []
        },
        teacherOptions: {
            type: Array,
            default: () => []
        },
        nameOptions: {
            type: Array,
            default: () => []
        },
        isGetAgent: {
            type: Boolean,
            default: false
        },
        isGetInventor: {
            type: Boolean,
            default: false
        },
    },

    created() {
        if (this.isGetAgent) {
            this.getAllAgent()
        }

        if (this.isGetInventor) {
            let params = {
                guard: 'company'
            }
            this.getInventorList(params)
        }
    },

    methods: {
        getInventorList (params) {
            this.$axios.get('api/company/user/list', {
                params: params
            }).then(res => {
                if (res.data.code == 200) {
                    this.inventorOptions = res.data.data
                }
            }).catch(err => {
                this.$message({
                    type: "err",
                    message: err
                });
            });
        },
        addFilterCondition(item) {
            
            let filterItem = {
                value: '',
                label: item.label,
                parameter: item.props,
                key: Date.now()
            }
            if (item.final) {
                filterItem.final = item.final
            }
            if (item.select) {
                filterItem.select = item.select
            }

            if (this.conditionForm.condition.length > 0) {
                let conditionlabels = []
                for (let i = 0; i < this.conditionForm.condition.length; i++) {
                    conditionlabels.push(this.conditionForm.condition[i].label)
                }
                let Check = conditionlabels.indexOf(item.label)
                Check == -1 ? this.conditionForm.condition.push(filterItem) : this.$message.error('请勿重复添加')
            } else {
                this.conditionForm.condition.push(filterItem)
            }

            this.showFilterCondition = false;
        },
        removeDomain(item) {
            let index = this.conditionForm.condition.indexOf(item)
            if (index !== -1) {
                this.conditionForm.condition.splice(index, 1)
            }
            if (item.label === '提交时间') {
                this.submitTime = []
            }
            let props = JSON.parse(JSON.stringify(this.conditionForm.condition))
            let params = {}
            props.forEach(v => {
                params[v.parameter] = v.value
            })
            this.showFilter = false
            this.$emit('searchMethods', params)
        },
        submitsearch(formName) {
            let that = this
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let props = JSON.parse(JSON.stringify(this.conditionForm.condition))
                    let params = {}
                    props.forEach(v => {
                        params[v.parameter] = v.value
                    })
                    // if (params.created_at) {
                    //     params.createdTime = params.created_at
                    //     delete params.created_at
                    // }
                    this.$emit('searchMethods', params)
                    // this.current_page = 1
                    // this.$refs['order-table'].clearSort()
                    // this.sort_params = {}
                    // this.search_params = {...params}
                    // this.getTableData()
                    this.showFilterCondition = false
                    this.showFilter = false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
            this.conditionForm.condition.forEach(v => {
                if (v.value) {
                    v.value = null
                }
            });
            this.$nextTick(() => {
                this.$refs[formName].clearValidate()
            })
            this.$emit('searchMethods', {}, true)
            // this.$refs['order-table'].clearSort()
            // this.sort_params = {}
            // this.search_params = {}
            // this.getTableData()
            // this.showFilterCondition = false
            // this.showFilter = false
        },
        getAllAgent() {
            let params = {},
                path = this.$route.path;
            if (path == '/admin/order/auditor') {
                params.parent_id = this.$store.state.user.id
            }
            
            if (this.$store.state.user.role_id == 2 && this.$store.state.user.is_teacher == 1) {
                this.$axios.get('api/user/get_student_info')
                .then(res => {
                    if (res.data.code == 200) {
                        this.agentOptions = res.data.data
                    }
                })
                .catch(err => {
                    this.$message({
                        type: "err",
                        message: err
                    });
                });

            } else {
                this.$axios.get('api/user/agent', {
                    params: params
                }).then(res => {
                    if (res.data.code == 200) {
                        this.agentOptions = res.data.data
                    }
                }).catch(err => {
                    this.$message({
                        type: "err",
                        message: err
                    });
                });
            }

            this.$axios.get('api/user/process').then(res => {
                if (res.data.code == 200) {
                    let arr = res.data.data;
                    this.processOptions = res.data.data
                }
            }).catch(err => {
                this.$message({
                    type: "err",
                    message: err
                });
            });
        },
    }
}
</script>

<style lang="less" scoped>
    .table-search {
        border:1px solid rgba(36,157,255,1);
        border-radius:12px;
        padding: 5px 16px;
        display:inline-block;
        font-size: 15px;
        line-height: 1;
        
        .poptip-condition-add {
            color: #249DFF;
        }
    }

    /deep/.ivu-poptip-inner {
		min-width: 450px;
		// height: 300px;
		overflow-y: scroll;
	}

	/deep/.poptip-condition .ivu-poptip-inner {
		min-width: 180px;
	}

	.demo-dynamic {
		padding-left: 10px;

		.el-form-item {
			margin-bottom: 12px;
		}

		.el-input {
			width: 240px;
		}

		.el-date-editor {
			width: 240px;
		}

		.el-button {
			padding: 9px 15px;
			vertical-align: baseline;
		}

		.el-form-item__error {
			padding-top: 0;
		}
	}

	.poptip-condition {
		display: block;
		margin-top: 10px;

		.poptip-condition-item {
			line-height: 25px;
			cursor: pointer;
		}

		.poptip-condition-add {
			font-size: 14px;
		}
	}

	.btns {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end; 
        padding-right: 37px;
    }
    .el-select {
        width: 240px;
    }
    .close {
        font-size: 14px;
        margin-left: 12px;
    }
    .close:hover {
        color: #249DFF;
    }
</style>
